import React from 'react';
import memo from '../common/wrapMemo';
import style from './UserDropdown.module.scss';

const UserDropdown = memo((props) => {
    const { user = {}, onChangePassword, onLogout, onClose } = props;
    return (
        <div className={style.userDropdown} onMouseLeave={onClose}>
            <div className={style.nameWrap}>
                <i className="iconfont icon-user-manage"></i>
                <div>
                    <div>
                        {user.get('role')? user.get('role').get('roleName') : ''}
                    </div>
                    <div className={style.name}>{user.get('userName')}</div>
                </div>
            </div>
            <div className={style.btn} onClick={onChangePassword}>
                更改密码
            </div>
            <div className={style.btn} onClick={onLogout}>
                退出登录
            </div>
        </div>
    );
});

export default UserDropdown;
